<%--
  Created by IntelliJ IDEA.
  User: zll
  Date: 2018/5/30
  Time: 12:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>上传</title>

    <jsp:include page="../comm/comm.jsp"/>
    <script src="/myjs/webuploader.js"></script>
    <link href="/css/upload.css" rel="stylesheet"/>
</head>
<body>
<div class="layui-form" action="">
    <input type="hidden" name="id" value="${data.id}">
    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name"  id="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" value="${data.name}">
        </div>
    </div>

    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">缩略图(<span style="color: red">建议122px*176px</span>)</label>
        <div class="layui-input-block">
            <div class="image-box clear" id="thumbSelect">
                <input name="goodsDetailJson" id="thumbJsonVal" value="${data.headimg}" type="hidden"/>
                <div id="thumb" value="${goods.thumb}"></div>
                <section class="upload-section">
                    <div class="upload-btn"></div>
                    <input type="file" id="thumbJson" value=""
                           accept="image/jpg,image/jpeg,image/png,image/bmp"
                           multiple="multiple"/>
                </section>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 30px">
        <div class="layui-input-block">
            <button class="layui-btn"  lay-submit lay-filter="formDemo" id="sub">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>
<script src="/myjs/upload.js"></script>
<script type="text/javascript">
    $("#thumbJson").ajaxImageUpload({
        url: '/pic/upload', //上传的服务器地址
        maxNum: 1, //允许上传图片数量
        zoom: true, //允许上传图片点击放大
        allowType: ["gif", "jpeg", "jpg", "bmp", 'png'], //允许上传图片的类型
        maxSize: 1, //允许上传图片的最大尺寸，单位M,
        hidenInputName:"thumbimg",
        success: function (data) {

        },
        error: function (e) {
           console.log(e);
        }
    }, $("#thumbSelect"));
    //alert($("#shJsonVal").attr("value"))
    $("#thumbSelect").prepend(initData($("#thumbJsonVal").attr("value")))
    function  initData(data) {
        if(!data){
            return "";
        }
        var datas=data.split(",");
        var html="";
        for(var i=0;i<datas.length;i++){
            html+='<section class="image-section"><div class="image-shade"></div><div class="image-delete"></div>'+
                '<img class="image-show" src="/upload/'+datas[i]+'" /><input id="src" name="src" value="" type="hidden" /></section>'
        }
        return html;
    }

    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data.field);
            var name=$("#name").val();
            if(name.length==0){
                alert("请填写姓名");
                return;
            }
            var thumbImg=$("#thumbSelect").find("img.image-show");
            if(thumbImg.length==0){
                alert("请上传缩略图");
                return;
            }


            var  params=new Object();
            params.headimg=getName(thumbImg[0].src);
            // var pictures="";
            // for (var i=0;i<shImg.length;i++){
            //     pictures+=getName(shImg[i].src)+",";
            // }
            // pictures=pictures.substring(0,pictures.length-1);
            // params.pictures=pictures;
            // params.details=videos;
            // params.content=desc;
            params.name=name;
            params.type=1;
            params.activityId=config.getQueryString("activityId");
            //alert($("*[name='id']").attr("value"))
            params.id=$("*[name='id']").attr("value");
            config.commPost("/tasks/saveOrUpdate.json",params,function (data) {
                alert("成功");
                location.href="/page/role/listtasks?type=1&activityId="+config.getQueryString("activityId");
            });
            return false;
        });

          function  getName(src) {
              var names=src.split("/");
              return names[4];
          }

    });
</script>
</body>
</html>
